<template>
  <transition name="goodDetail">
    <div v-show="showDetail" class="detail-page">
      <div class="detail-header">
        <div class="backHome" @click="showDetail = false">
          <i class="iconfont icon-xiangzuojiantou back-icon"></i>
        </div>
        <div class="wrapper">
          <swiper :options="swiperOption" ref="mySwiper"  class="my-swiper">
            <swiper-slide v-for="(item, index) in imgs" :key="index">
              <img :src="item" alt="">
            </swiper-slide>
            <div class="swiper-pagination"  slot="pagination"></div>
          </swiper>
        </div>
      </div>
    </div>
  </transition>
</template>

<script type="text/ecmascript-6">
  export default {
    data () {
      return {
        showDetail: false,
        imgs: ['https://gd3.alicdn.com/imgextra/i3/0/O1CN01IiyFQI1UGShoFKt1O_!!0-item_pic.jpg_400x400.jpg',
      'https://gd3.alicdn.com/imgextra/i3/TB1RPFPPFXXXXcNXpXXXXXXXXXX_!!0-item_pic.jpg_400x400.jpg'
      , 'https://gd2.alicdn.com/imgextra/i2/38832490/O1CN01IYq7gu1UGShvbEFnd_!!38832490.jpg_400x400.jpg'],
        swiperOption: {
          notNextTick: true,
          loop:true,
          speed:1000,
          autoplay: {
            delay: 3000,//秒
            stopOnLastSlide: false,
            disableOnInteraction: false,//滑动不会失效
          },
          pagination: {
            el: '.swiper-pagination',
            clickable :true,
          },
          paginationClickable: true,
        },
      }
    },
    components: {

    },
    created () {

    },
    methods: {
      show () {
        this.showDetail = true;
      }
    }
  }
</script>

<style scoped lang="stylus">
.detail-page
  position:fixed
  left 0
  top 0
  bottom:0
  right 0
  z-index 3
  width 100%
  background #fff
  &.goodDetail-enter-active, &.goodDetail-leave-active
    transition all 0.4s linear
  &.goodDetail-enter, &.goodDetail-leave-active
    transform translate3d(100%, 0, 0)
  .detail-header
    position relative
    .backHome
      position absolute
      z-index 4
      left .1rem
      top .2rem
      width .61rem
      height .61rem
      background-color rgba(0,0,0,.5)
      border-radius 50%
      display flex
      align-items center
      .back-icon
        color rgb(255, 255, 255)
        font-size: .45rem
    .wrapper >>> .swiper-pagination-bullet-active
      background: #000
    .wrapper
      .my-swiper
        .swiper-wrapper
          .swiper-slide
            img
</style>
